<template>
  <div>
    <!--  //实名认证-->
    <el-card class="box-card">
      <div class="clearfix">
        <span class="hyn">振涛银行欢迎您</span>
      </div>
    </el-card>
    <!--  个人信息-->
    <el-card class="box-card">
      <!--      我的头像-->
      <div class="userinfo">
        <template v-if="!avatar">
          <i class="el-icon-user" />
          avatar
        </template>
        <template v-else>
          <!--        <img class="avatar" :src="avatar" />-->
          <el-col :span="12">
            <div class="demo-basic--circle">
              <div class="block">
                我的头像：
                <el-avatar :size="50" :src="avatar" />
              </div>
            </div>
          </el-col>
        </template>
        <el-col :span="12">
          <div class="demo-basic--circle">
            <div class="block">
              真实姓名：
              <template v-if="realname === 'null'">
                <i class="el-icon-user" />
                <el-button type="primary" @click="handleClick = true">
                  去实名认证
                </el-button>
              </template>
              <template v-else>
                <i class="el-icon-user" />
                {{ realname }}
              </template>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="demo-basic--circle">
            <div class="block">
              我的手机号：
              {{ phone }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <template v-if="idcard === 'null'">
            <i class="el-icon-user" />
            <span class="nouserinfo">您还未实名认证</span>
          </template>
          <template v-else>
            <i class="el-icon-user" />
            <div class="block">
              我的身份证号:
              {{ idcard }}
            </div>
          </template>
        </el-col>
        <el-col :span="12">
          <template v-if="cname === 'null'">
            <i class="el-icon-user" />
            <span class="nouserinfo">您还未绑定工作</span>
            <el-button type="primary" @click="toWork = true">
              去绑定工作
            </el-button>
          </template>
          <template v-else>
            <i class="el-icon-user" />
            <div class="block">
              工作信息:
              {{ cname }}
            </div>
          </template>
        </el-col>
        <!--        我的信誉等级-->
        我的信誉等级:
        <el-rate
          v-model="value"
          disabled
          show-score
          text-color="#ff9900"
          text-template="<span>{{ value }}分</span>"
        />
        <!--        我的资产评级-->
        <br />
        我的资产评级:
        <el-rate v-model="values" disabled show-score text-color="#ff9900" />
      </div>
      <div class="userinfo">
        <el-button type="primary" @click="filezm = true">
          提交资产证明
        </el-button>
      </div>
    </el-card>

    <!--  实名认证-->
    <el-dialog
      v-model="handleClick"
      title="实名认证"
      width="600px"
      center
      draggable="true"
    >
      <span>
        <el-form :model="users" :rules="rules">
          <!--        id-->
          <el-form-item label="用户ID">
            <el-input v-model="users.id" disabled />
          </el-form-item>
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="users.realname" />
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard">
            <el-input v-model="users.idcard" />
          </el-form-item>
          <span class="sfz">
            根据【中华人民共和国国家标准 GB
            11643-1999】中有关公民身份号码的规定，公民身份号码是特征组合码，由十七位数字本体码和一位数字校验码组成
          </span>
          <span class="sfz">【实名认证后将不可以修改】</span>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClick = false">取消</el-button>
          <el-button type="primary" @click="toMyIdCard">
            认证
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="filezm"
      title="提交资产证明"
      width="600px"
      center
      draggable="true"
    >
      <span></span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="filezm = false">取消</el-button>
          <el-button type="primary" @click="toMyIdCard">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="toWork"
      title="绑定工作"
      width="600px"
      center
      draggable="true"
    >
      <span>
        <!--        下拉框动态获取所有工作-->
        <el-select v-model="cname" placeholder="请选择工作">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="toWork = false">取消</el-button>
          <el-button type="primary" @click="toMyWork">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
    <div id="main" style="width:600px;height:500px;float: left"></div>
    <div id="main1" style="width:600px;height:500px;float: right"></div>
    <el-button @click="getmain">出来</el-button>
  </div>
</template>

<script setup>
// import { GotoIdentity } from '@/api/login'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { GotoIdentity, Tocname } from '@/api/login'
import * as echarts from 'echarts'

const handleClick = ref(false)
const toWork = ref(false)
const filezm = ref(false)
const realname = window.localStorage.getItem('realname')
const avatar = window.localStorage.getItem('avatar')
const phone = window.localStorage.getItem('phone')
const idcard = window.localStorage.getItem('idcard')
const id = window.localStorage.getItem('id')
const career = window.localStorage.getItem('career')
// alert(career)
const cname = ref('')
//信誉等级
const credit = window.localStorage.getItem('credit')
//资产评级
const asset = window.localStorage.getItem('asset')
// alert("信誉等级"+credit)
// alert("资产评级"+asset)
const value = ref(credit)
const values = ref(asset)
const users = ref({
  id: id,
  realname: '',
  idcard: '',
})
const passwords = ref({
  id: id,
  password: '',
  newpassword: '',
})

const rules = {
  realname: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 2, max: 4, message: '请输入正确的名称', trigger: 'blur' },
  ],
  idcard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    {
      pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      message: '请输入正确的身份证号',
      trigger: 'blur',
    },
  ],
  newpassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 12, message: '请输入正确的密码', trigger: 'blur' },
  ],
  oldpassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    { min: 6, max: 12, message: '请输入正确的密码', trigger: 'blur' },
  ],
}
const toMyIdCard = () => {
  if (!users.value.realname || !users.value.idcard) {
    ElMessage.error('请输入正确的信息')
  } else if (users.value.idcard.length !== 18) {
    ElMessage.error('请输入正确的身份证号')
  } else {
    GotoIdentity(users.value).then(res => {
      if (res.code === 200) {
        ElMessage.success('认证成功，请重新登录')
        //调用退出登录方法
        window.localStorage.clear()
        window.location.href = '/#/login'
      }
    })
  }
}
const Tocnames = () => {
  // alert(career)
  if (career != null) {
    Tocname(career).then(res => {
      if (res.code === 200) {
        cname.value = res.data.zname
      }
    })
  }
}
Tocnames()

function getmain() {
  //获取echarts对象
  let myChart = echarts.init(document.getElementById('main'))
  let myChart1 = echarts.init(document.getElementById('main1'))
  // 指定图表的配置项和数据
  let option = {
    backgroundColor: '#2c343c',
    title: {
      //标题配置
      text: '资产占比',
      left: 'center',
      top: 20,
      textStyle: {
        color: '#f00',
      },
    },

    tooltip: {
      //提示框显示
      trigger: 'item', //当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
      formatter: '{a} <br/>{b} : {c} ({d}%)', //系列名  数据项变量名  数据值   百分比
    },

    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 1],
      },
    },
    legend: {
      //图例
      orient: 'vertical', //纵向显示
      x: 'left',
      textStyle: {
        color: '#f00',
      },
      data: ['存款', '理财产品', '余额', '银行卡', '信用卡'],
    },
    series: [
      //数据
      {
        name: '资产占比',
        type: 'pie', //饼图
        radius: '75%',
        center: ['50%', '50%'],
        data: [
          { value: 335, name: '存款' },
          { value: 310, name: '理财产品' },
          { value: 500, name: '余额' },
          { value: 235, name: '银行卡' },
          { value: 400, name: '信用卡' },
        ].sort(function(a, b) {
          return a.value - b.value
        }), //按照value值从小到大排序
        roseType: 'radius',
        label: {
          color: 'rgba(255, 255, 255, 0.3)',
        },
        labelLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)',
          },
          smooth: 0.2,
          length: 10,
          length2: 20,
        },
        itemStyle: {
          color: '#c23531',
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },

        // animationType: "scale",
        // animationEasing: "elasticOut",
      },
    ],
  }
  let option2 = {
    title: {
      //标题配置
      text: '理财收益/周',
      left: 'center',
      top: 20,
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    legend: {},
    toolbox: {
      //工具栏
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    tooltip: {
      trigger: 'axis', //显示当前列的所有信息
    },
    yAxis: {
      type: 'value',
    },
    series: [
      //数据   五条折线数据  line 折线
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      },
      {
        data: [11, 22, 33, 44, 55, 66, 77],
        type: 'line',
      },
      {
        data: [111, 222, 333, 444, 555, 666, 777],
        type: 'line',
      },
      {
        data: [711, 622, 533, 444, 355, 266, 177],
        type: 'line',
      },
      {
        data: [611, 422, 533, 644, 755, 666, 177],
        type: 'line',
      },
    ],
  }
  myChart1.setOption(option2)
  myChart.setOption(option)
}
</script>

<style scoped>
.phoneup {
  /*边框*/
  border: 1px solid #0b0b0b;
  font-size: 15px;
  color: #0048ff;
}

.sfz {
  font-size: 12px;
  color: red;
}

.nouserinfo {
  color: #eb4646;
  font-size: 20px;
}

.hyn {
  font-size: 20px;
  margin-left: 10px;
  color: #eb4646;
  font-family: 华文楷体;
}

.echart {
  width: 800px;
  height: 500px;
}
</style>
